<template>
  <div class="guide-wrapper">
    <div class="guide-header">
      <div class="guide-header-title">操作引导</div>
      <div class="guide-header-operate" @click="toggleClick">
        <!-- 收起 -->
        <div class="btn" v-if="isToggle"> 收起<icon-up /> </div>
        <!-- 展开 -->
        <div class="btn" v-else> 展开<icon-down /> </div>
      </div>
    </div>
    <div class="guide-content" v-show="isToggle">
      <div class="guide-content-line"></div>
      <a-steps class="custom-steps">
        <a-step v-for="(item, index) in stepList" status="process" :key="index" :title="item.title">
          <template #description>
            {{ item.description }}
          </template>
        </a-step>
      </a-steps>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  const isToggle = ref(true)
  const emits = defineEmits(['change'])

  const stepList = [
    { title: '第一步', description: '开启渠道，登录账号，保证账号准确，且已成功登录。' },
    { title: '第二步', description: '在OTA渠道管理页面中完成车型及门店匹配，未匹配则无法反写价格。' },
    { title: '第三步', description: '创建模板，选择车型，设置各平台价格。' },
    { title: '第四步', description: '发起反写任务：根据模板、价格类型、渠道，设定反写任务。' },
    { title: '第五步', description: '查看反写结果' },
  ]

  const toggleClick = () => {
    isToggle.value = !isToggle.value

    emits('change')
  }
</script>
<style lang="less" scoped>
  .guide-wrapper {
    background: #f7f8fa;
    border-radius: 0px 0px 0px 0px;
    padding: 16px 20px;
    margin-top: 20px;
    .guide-header {
      display: flex;
      justify-content: space-between;
      height: 22px;
      line-height: 22px;
      .guide-header-title {
        font-weight: 600;
        font-size: 16px;
        color: #1d2129;
      }
      .guide-header-operate {
        color: #165dffff;
        .btn {
          padding-left: 6px;
          cursor: pointer;
          svg {
            margin-left: 6px;
          }
        }
      }
    }
    .guide-content {
      margin-top: 16px;
      .guide-content-line {
        width: 100%;
        height: 1px;
        background: #e5e6eb;
        margin-bottom: 20px;
      }
      .custom-steps {
        :deep(.arco-steps-item-content) {
          width: calc(100% - 49px);
          .arco-steps-item-description {
            max-width: 100%;
          }
        }
        :deep(.arco-steps-item-description) {
          line-height: 22px;
        }
        .arco-steps-item:nth-child(2) {
          :deep(.arco-steps-item-description) {
            color: #f53f3f;
          }
        }
        .arco-steps-item:last-child {
          flex: 1;
        }
      }
    }
  }
</style>
